<template>
  <div class="chart-bar-line">
    <VChart :option="chartOption" autoresize></VChart>
  </div>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GraphicComponent,
  ToolboxComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  BarChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GraphicComponent,
  ToolboxComponent,
  GridComponent
])

export default {
  name: 'chart-bar-line',
  components: {
    VChart
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
    }
  },
  computed: {
    chartOption () {
      const chartOptions = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          bottom: 60
        },
        legend: {
          bottom: 0
        },
        xAxis: [
          {
            type: 'category',
            data: this.xAxisData,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: this.$t('all.autotext799'),
            // min: 0,
            // max: 250,
            interval: 50,
            // axisLabel: {
            //   formatter: '{value} ml'
            // },
            axisLine: {
              show: true
            },
            nameTextStyle: {
              fontSize: 14,
              color: '#031F47'
            }
          },
          {
            type: 'value',
            name: this.$t('all.autotext862'),
            // axisLabel: {
            //   formatter: '{value} °C'
            // },
            axisLine: {
              show: true
            },
            nameTextStyle: {
              fontSize: 14,
              color: '#031F47'
            }
          }
        ],
        series: [
          {
            name: this.$t('all.autotext287'),
            type: 'bar',
            // tooltip: {
            //   valueFormatter: function (value) {
            //     return value + ' ml'
            //   }
            // },
            data: this.applyCount
          },
          {
            name: this.$t('all.autotext799'),
            type: 'bar',
            // tooltip: {
            //   valueFormatter: function (value) {
            //     return value + ' ml'
            //   }
            // },
            data: this.payCount
          },
          {
            name: this.$t('all.autotext867'),
            type: 'line',
            yAxisIndex: 1,
            data: this.applyTotalAmount
          },
          {
            name: this.$t('all.autotext1408'),
            type: 'line',
            yAxisIndex: 1,
            data: this.payTotalAmount
          }
        ]
      }
      return chartOptions
    },
    xAxisData () {
      const { applyCount, applyTotalAmount, payAmount, payTotalAmount } = this.data
      let longestItem = []
      const allItemsList = [applyCount, applyTotalAmount, payAmount, payTotalAmount]
      allItemsList.forEach(item => {
        if (item?.length > longestItem.length) {
          longestItem = item
        }
      })
      return longestItem.map(e => e.time)
    },
    applyCount () {
      const { applyCount } = this.data
      if (!applyCount) return []
      return this.formatCountData(applyCount)
    },
    applyTotalAmount () {
      const { applyTotalAmount } = this.data
      if (!applyTotalAmount) return []
      return this.formatAmountData(applyTotalAmount)
    },
    payCount () {
      const { payAmount } = this.data
      if (!payAmount) return []
      return this.formatCountData(payAmount)
    },
    payTotalAmount () {
      const { payTotalAmount } = this.data
      if (!payTotalAmount) return []
      return this.formatAmountData(payTotalAmount)
    }
  },
  methods: {
    formatCountData (data = []) {
      return data.map(e => ({
        name: e.time,
        value: e.count,
        totalAmount: e.totalAmount
      }))
    },
    formatAmountData (data = []) {
      return data.map(e => ({
        name: e.time,
        value: e.totalAmount,
        count: e.count
      }))
    }
  }
}
</script>

<style scoped lang='less'>
.chart-bar-line {
  height: calc(100% - 65px);
}

</style>
